import React from 'react';
import { Button, Col, Row } from 'antd';

export type UpdateComputedProps = {
  cloumsData: any;
  computedArr?: CLOUMS.Computed[];
  setComputedArr: any;
  computedFn: any;
};

const CalculatorPage: React.FC<UpdateComputedProps> = (props) => {
  /* 所有的指标数据 */
  const indicatorData = props.cloumsData;
  /* 父组件 修改页面数据的方法 */
  const setComputedArr = props.setComputedArr;
  /* 最新的指标数组 即 按钮数组 */
  const computedData = props.computedArr;

  // 基础指标
  const btnArr_base: CLOUMS.CLOUMSListItem[] = [];
  // 必须指标
  const btnArr_necessary: CLOUMS.CLOUMSListItem[] = [];
  // 自定义指标
  // const btnArr_custom: CLOUMS.CLOUMSListItem[] = [];

  /* 根据 类型 处理 按钮分组 */
  indicatorData.forEach((el: CLOUMS.CLOUMSListItem) => {
    switch (el.type) {
      case '1':
        btnArr_base.push(el);
        break;
      case '2':
        btnArr_necessary.push(el);
        break;
      case '3':
        // btnArr_custom.push(el);
        break;
      default:
        break;
    }
  });

  /**
   * 按钮点击事件
   * @param {按钮参数} el
   **/
  const btnClick = (el: any, type: number, arr: CLOUMS.Computed[] | undefined) => {
    let newArr: any[] = [];
    if (arr) {
      // 复制数据（ props 中数据不能直接操作 ）
      newArr = [...arr];
    }
    // 按钮类型 为 1 且 code 为 delete
    // 对数据进行删除最后一位
    if (el.type === '1' && el.code === 'delete') {
      newArr.pop();
    } else if (el.type === '1' && el.code === 'clear') {
      // 按钮类型 为 1 且 code 为 clear
      // 清空数据
      newArr = [];
    } else {
      newArr.push(el);
    }
    // 父组件传递的 公式重置 方法
    setComputedArr(newArr);
    /* 父组件传递的 公式字符串重置 方法 */
    props.computedFn(newArr);
  };

  /**
   * 生成按钮函数
   * @param {按钮数组} btnArr
   * @param {按钮类型} type
   * @returns {生成的一个个元素（按钮）} dom元素
   **/
  const generateBtn = (btnArr: CLOUMS.CLOUMSListItem[], type: number) => {
    switch (type) {
      case 1:
        // 添加删除按钮
        btnArr.unshift({ name: '清空', code: 'clear', type: '1' });
        // 添加清空按钮
        btnArr.unshift({ name: '删除', code: 'delete', type: '1' });
        return btnArr.map((el) => {
          return (
            <Button
              style={{ margin: '5px' }}
              key={el.code}
              onClick={() => btnClick(el, 1, computedData)}
            >
              {el.name}
            </Button>
          );
        });
      case 2:
        return btnArr.map((el) => {
          return (
            <Button
              style={{ margin: '5px' }}
              key={el.code}
              onClick={() => btnClick(el, 2, computedData)}
            >
              {el.name}
            </Button>
          );
        });
      case 3:
        return btnArr.map((el) => {
          return (
            <Button
              style={{ margin: '5px' }}
              key={el.code}
              onClick={() => btnClick(el, 3, computedData)}
            >
              {el.name}
            </Button>
          );
        });
      default:
        return '';
    }
  };

  return (
    <Row>
      <Col span={16}> {generateBtn(btnArr_necessary, 2)} </Col>
      <Col span={8}> {generateBtn(btnArr_base, 1)} </Col>
      {/* 自定义指标按钮生成 */}
      {/* <div> {generateBtn(btnArr_custom, 3)} </div> */}
    </Row>
  );
};

export default CalculatorPage;
